<template>
  <div class="model_url">
    <div class="mb-15px mt-15px">
      <el-text tag="b">转视频图片</el-text>
      <el-text tag="p"/>
    </div>
    <div>
      <UploadImgs
        v-model="fileList"
        :fileType="['image/png','image/jpg','image/jpeg']"
        :fileSize="20"
        :limit="10"
        class="min-w-80px"
        height="80px" width="80px"
      />
    </div>
    <div class="hot-words">
      <div>
        <el-text tag="b">模型</el-text>
      </div>
      <el-space wrap class="word-list">
        <el-button
          round
          class="btn"
          :type="selectPromptModel === promptModel.key ? 'primary' : 'default'"
          v-for="promptModel in promptModelList"
          :key="promptModel.key"
          @click="handlePromptModelClick(promptModel.key)"
        >
          {{ promptModel.name }}
        </el-button>
      </el-space>
    </div>
    <div class="enable_pbr">
      <div class="mt-15px mb-15px">
        <el-text tag="b">随机种子</el-text>
      </div>
      <el-input type="number" :maxlength="7" v-model="seed"/>
    </div>

    <div class="prompt">
      <div>
        <el-text tag="b">描述生成什么样的视频</el-text>
      </div>
      <el-input
        v-model="promptText"
        maxlength="1024"
        :rows="5"
        class="w-100% mt-15px"
        input-style="border-radius: 7px;"
        placeholder="例如：兔子正在吃胡萝卜。"
        show-word-limit
        type="textarea"
      />
    </div>

    <div class="enable_pbr">
      <div class="mt-15px mb-15px">
        <el-text tag="b">是否加水印</el-text>
      </div>
      <!--是/否-->
      <el-switch v-model="watermark"/>
    </div>

    <div class="hot-words">
      <div>
        <el-text tag="b">视频时长（秒）</el-text>
      </div>
      <el-space wrap class="word-list">
        <el-button
          round
          class="btn"
          :type="selectDuration === duration.key ? 'primary' : 'default'"
          v-for="duration in durationList"
          :key="duration.key"
          @click="handleDurationClick(duration.key)"
        >
          {{ duration.name }}
        </el-button>
      </el-space>
    </div>

    <div class="hot-words">
      <div>
        <el-text tag="b">视频比例（长宽）</el-text>
      </div>
      <el-space wrap class="word-list">
        <el-button
          round
          class="btn"
          :type="selectRatio === ratio.key ? 'primary' : 'default'"
          v-for="ratio in ratioList"
          :key="ratio.key"
          @click="handleRatioClick(ratio.key)"
        >
          {{ ratio.name }}
        </el-button>
      </el-space>
    </div>

  </div>

  <div class="btns">
    <el-button type="primary" size="large" round :loading="createIn" @click="handleCreateVideo">
      {{ createIn ? '生成中' : '生成内容' }}
    </el-button>
  </div>
</template>
<script setup lang="ts">
import {ImageToVideoReqVO, VideoApi, VideoVO} from "@/api/ai/video";
import {
  AiCreateVideoEnum,
  AiPlatformEnum,
  durationList, promptModelList,
  ratioList
} from "@/views/ai/utils/constants";

const message = useMessage() // 消息弹窗

// 定义属性
const fileList = ref<string[]>([])
const selectPromptModel = ref<string>('gen3a_turbo')
const seed = ref<number>(0)
const promptText = ref<string>()
const watermark = ref<boolean>(false)
const selectDuration = ref<number>(5)
const selectRatio = ref<string>('1280:768');
const createIn = ref<boolean>(false) // 生成中

const emits = defineEmits(['onCreateStart', 'onCreateComplete']) // 定义 emits

/** 视频时长 */
const handleDurationClick = async (key: number) => {
  selectDuration.value = key
}
/** 视频比例 */
const handleRatioClick = async (key: string) => {
  selectRatio.value = key
}
/** 视频模型 */
const handlePromptModelClick = async (key: string) => {
  selectPromptModel.value = key
}

/** 填充值 */
const settingValues = async (videoVO: VideoVO) => {
  fileList.value = videoVO.imageUrl?videoVO.imageUrl.split(","): [];
  selectPromptModel.value = videoVO.promptModel;
  seed.value = videoVO.seed;
  promptText.value = videoVO.promptText;
  selectDuration.value = videoVO.duration;
  selectRatio.value = videoVO.ratio;
  watermark.value = videoVO.watermark;
}

const handleCreateVideo = async () => {
// 二次确认
  await message.confirm(`确认生成内容?`)
  try {
    // 加载中
    createIn.value = true
    // 回调
    emits('onCreateStart', AiPlatformEnum.RUNWAY)
    const form = {
      platform: AiPlatformEnum.RUNWAY, // 平台
      model: AiPlatformEnum.RUNWAY, // 模型
      funcType: AiCreateVideoEnum.IMAGE_VIDEO,
      fileList: fileList.value,
      promptModel: selectPromptModel.value,
      seed: seed.value,
      promptText: promptText.value,
      watermark: watermark.value,
      duration: selectDuration.value,
      ratio: selectRatio.value,
    } as ImageToVideoReqVO
    // 发送请求
    await VideoApi.generateImageToVideo(form)
  } finally {
    // 回调
    emits('onCreateComplete', AiPlatformEnum.RUNWAY)
    // 加载结束
    createIn.value = false
  }
}
/** 暴露组件方法 */
defineExpose({ settingValues })

</script>
<style scoped lang="scss">
// 提示词
.prompt {
}

// 热词
.hot-words {
  display: flex;
  flex-direction: column;
  margin-top: 15px;

  .word-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
    margin-top: 15px;

    .btn {
      margin: 0;
    }
  }
}

.btns {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
</style>
